<script setup lang="ts">
  import {useRouter} from "vue-router";
  import { ArrowDown } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'

  const handleCommand = (command: string ) => {
    ElMessage(`${command}`)
  }

  let router=useRouter();

  const routerGo=(e:number)=>{

    if(e==1){
      router.push("/file_info")
    }
    if(e==2){
      router.push("/share_file")
    }
    if(e==3){
      router.push("/uploading")
    }
    if(e==4){
      router.push("/downing")
    }
    if(e==5){
      localStorage.removeItem("token")
      router.push("/user_login")
    }
  }
</script>

<template>

  <div class="pan_head">


      <div class="pan_head_logo">
        <span  class="pan_head_logo_qs">QST</span>
        <span>云端网盘</span>
      </div>

    <div class="pan_head_left_font">
      <el-text class="mx-1" type="primary" @click="routerGo(1)">网盘</el-text>
      <el-text class="mx-1" type="primary" @click="routerGo(2)">分享</el-text>
      <el-text class="mx-1" type="primary" @click="routerGo(3)">上传文件</el-text>
      <el-text class="mx-1" type="primary" @click="routerGo(4)">正在下载</el-text>
    </div>
    <div class="pan_head_right_font">
      <div class="pan_head_right_font_img" >
        <el-image   src="002.png"/>
        <el-dropdown trigger="click"  @command="handleCommand">
          <span class="el-dropdown-link" >
            <el-text type="info" >admin</el-text>
            <el-icon ><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu >
              <el-dropdown-item command="退出成功" @click="routerGo(5)" >退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

       <div class="pan_head_right_font_path">
         当前目录  <el-text type="primary">./</el-text>
       </div>
      <div class="pan_head_right_font_down">
        <el-text style="font-size: 20px;" type="primary">客户端下载</el-text>
      </div>

    </div>
  </div>
</template>

<style scoped lang="less">
  .pan_head{
    font-family: 华文楷体;
    font-size: 20px;
    background-color:aliceblue;
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .pan_head_left_font{
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      .el-text{
        font-size: 25px;
        line-height: 80px;
        margin-right: 30px;
      }
    }
    .pan_head_right_font{
       display: flex;
       justify-content: space-around;
       height: 80px;
       align-items: center;
       cursor: pointer;
       div{
         margin-right: 20px;
         line-height: 80px;
       }
       .pan_head_right_font_img{
        display: flex;
         .el-image{
           line-height: 80px;
           height: 50px ;
           width: 50px;
           border-radius: 50%;
           margin-top: 13px;
         }

         .el-text{
           font-size: 20px;
         }
    }}
    .pan_head_logo{
      display: flex;
      justify-content: center;;
      align-items: center;
      text-align: center;
      span{
        background-image:-webkit-linear-gradient(bottom,#1B1464,#5758BB,#7d5fff);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        font-weight: bold;

      }
      .pan_head_logo_qs{
        font-size: 35px;
      }
      span{
        font-size: 23px;
      }


    }
  }


</style>

